<!-- 学社 - 考试 - 考试详情 -->
<template>
  <view class="pb-20 pt-5">
    <z-navbar title="考试详情" :border-bottom="true"></z-navbar>
    <view class="px-4">
      <view class="relative py-2 pl-2 bg-#F5F5F5 h-122 flex items-center mb-4">
        <u-image class="mr-2" width="92" height="92" border-radius="12"
          src="/package_society/static/images/img_cover_exam.png"></u-image>
        <view class="max-width-80 text-single ml-4 mr-11 c-#666 text-28">{{ state.detailData?.paper_name }}</view>
      </view>
      <view class="c-#666 text-28 flex mb-3">
        <view class="flex-shrink-0">考试类目：</view>
        <view class="flex-1 text-single">{{ state.detailData?.category?.name }}</view>
      </view>
      <view class="c-#666 text-28 flex mb-3">
        <view class="flex-shrink-0">考试题目名称：</view>
        <view class="flex-1 text-single">{{ state.detailData?.paper_name }}</view>
      </view>
      <view class="c-#666 text-28 mb-3">选择题数：{{ state.detailData?.single_number + state.detailData?.multiple_number }}
      </view>
      <view class="c-#666 text-28 mb-3">满分：{{ state.detailData?.total_score }}</view>
      <view class="c-#666 text-28 mb-3">及格分：{{ state.detailData?.pass_score }}</view>
      <view class="c-#666 text-28 mb-7">考试时长：{{ state.detailData?.duration }}</view>
      <!-- 考试记录 -->
      <view v-for="(item, index) in state.detailData?.log_list" :key="index" class="mb-4 pl-4 relative h-150" @click="navigate(`/package_society/pages/exam/testing/detail?exam_log_id=${item.id}&club_id=${state.club_id}&duration=${state.detailData?.duration}`)">
        <image class="absolute left-0 top-0 w-full h-150"
          :src="`/package_society/static/images/bg_log_level${item.level}.png`"></image>
        <view class="relative z-2 flex flex-col justify-center h-full">
          <view class="pr-6 flex justify-between items-center mb-1">
            <view class="c-#333 text-32 font-bold text-single">{{ item.exam_name }}</view>
            <view class="text-28" :class="`c-level${item.level}`">{{ item.score }}分</view>
          </view>
          <view class="pr-3 flex justify-between items-center">
            <view class="flex text-24 c-#999">
              <view>{{ dateFormat(item.createtime, "YYYY-MM-DD HH:mm") }}</view>
              <view class="ml-4">考试时长：{{ item.exam_time }}</view>
            </view>
            <image class="w-116 h-42" :src="`/package_society/static/images/img_log_level${item.level}.png`"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 自己才能考试 -->
    <view v-if="state.detailData?.is_self" class="bottom-wrap-16 bg-white">
      <u-line class="w-full" color="#eee" :hair-line="false" />
      <view class="btn-submit" @click="onSubmit">开始考试</view>
    </view>
  </view>
</template>
<script setup>
import { dateFormat } from '@/common/util/date'
import { getExamDetail } from '@/common/http/module/society.js'
import { navigate } from "@/common/util/uni";

const state = reactive({
  exam_id: '', // 试卷id
  club_id: '', // 学社id
  user_id: '', // 用户id
  detailData: null
})

function onSubmit () {
  navigate(`/package_society/pages/exam/testing/index?exam_id=${state.exam_id}&club_id=${state.club_id}&duration=${state.detailData?.duration}`)
}

function loadData () {
  getExamDetail(state.club_id, state.exam_id, state.user_id).then(res => {
    state.detailData = res.data
  })
}

onLoad(options => {
  state.exam_id = options.exam_id
  state.club_id = options.club_id
  state.user_id = options?.user_id
  loadData()
})
</script>

<style lang="scss" scoped>
.c-level1 {
  color: #FF513A;
}

.c-level2 {
  color: #3FB352;
}

.c-level3 {
  color: #F4AF22;
}
</style>
